<template>
  <page-layout>
    <div class="body__container">
      <div>
        <el-button type="primary" size="mini" @click="addMenuHandle()">添加菜单</el-button>
      </div>
      <el-card class="box-card">
        <el-tree
          :data="treeData"
          node-key="pkId"
          default-expand-all
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="custom-tree-node-label">{{ data.title }}</span>
            <span>
              <el-link type="primary" @click="() => addMenuHandle(data.level,data.pkId)"> 添加子菜单 </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link type="primary" @click="() => editHandle(data)"> 编辑菜单 </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link type="danger" @click="() => doDelete(data.pkId)"> 删除菜单 </el-link>
            </span>
          </span>
        </el-tree>
      </el-card>
    </div>
    <edit-dialog :title="editMap[editType]" width="900px" :show.sync="editFlag">
      <menu-edit-form ref="menuEditForm" :data-form="temp"></menu-edit-form>
      <primary-button slot="ok" v-if="editType=='create'" @click.native="doCreate">确定</primary-button>
      <primary-button slot="ok" v-if="editType=='update'" @click.native="doUpdate">确定</primary-button>
    </edit-dialog>
  </page-layout>
</template>

<script>
import PageLayout from '@/components/PageLayout'
import EditDialog from '@/components/EditDialog'
import {PrimaryButton} from '@/components/Form'
import {tree} from "@/api/menu";
import MenuEditForm from "@/views/menu/components/MenuEditForm";
import ResultMixin from '@/mixins/resultMixin'
import {create, update, remove} from '@/api/menu'

export default {
  components: {MenuEditForm, PageLayout, EditDialog, PrimaryButton},
  mixins: [ResultMixin],
  data() {
    return {
      treeData: [],
      editFlag: false,
      editType: 'create',
      editMap: {
        create: '新增',
        update: '编辑'
      },
      temp: null
    }
  },
  computed: {},
  watch: {},
  methods: {
    loadTree() {
      tree().then(res => {
        this.treeData = res.result
      })
    },
    addMenuHandle(level = 0, pid = '') {
      this.editType = 'create'
      this.editFlag = true
      this.temp = Object.assign({}, {level: level + 1, pid: pid})
    },
    editHandle(data) {
      this.editType = 'update'
      this.editFlag = true
      this.temp = Object.assign({}, data)
    },
    saveCbk() {
      this.editFlag = false
      this.loadTree()
    },
    doCreate() {
      this.$refs.menuEditForm.validate(() => {
        create(this.temp).then(res => {
          this.ok(res, '新增', this.saveCbk)
        })
      })
    },
    doUpdate() {
      this.$refs.menuEditForm.validate(() => {
        update(this.temp).then(res => {
          this.ok(res, '修改', this.saveCbk)
        })
      })
    },
    doDelete(id) {
      this.$confirm('确定要删除此菜单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id).then(res => {
          this.ok(res, '删除', this.loadTree)
        })
      }).catch(() => {
      });
    }

  },
  mounted() {
    this.loadTree()
  }
}
</script>

<style lang="scss">
.body__container {
  padding: 20px;
  height: 100%;
  display: grid;
  grid-template-rows: 50px auto;

  .box-card {
    height: 100%;

    .el-tree {
      .custom-tree-node {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;

        &-label {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
